<template>
    <div class="downloadCenter">
        <div class="title">下载中心</div>
        <div class="projectBidding">
            <div class="elTable">
                <el-table
                    border
                    :data="list"
                    style="width: 100%;height: 100%">
                    <el-table-column
                    prop="id"
                    width="50"
                    label="序号">
                    </el-table-column>
                    <el-table-column
                    prop="title"
                    label="招标"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop=""
                    label="">
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">下载文件</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="paging">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalNumber">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            list:[
                {
                    id:1,
                    title:"XX项目招标玩具"
                },
                {
                    id:1,
                    title:"XX项目招标玩具"
                }
            ],
            // 总数
            totalNumber:0,
            // 多少条一页
            pageSize:1,
            // 当前页
            currentPage:1
        }
    },
    methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // 当前页
            this.currentPage = val
        }
    },
    mounted(){
        this.totalNumber = this.list.length
    }
}
</script>

<style lang="less" scoped>
.public(){
    width: calc(100% - 38px);
    height: 50px;
    background: rgb(255, 255, 255);
    margin-left: 20px;
    // border-bottom: 1px solid #dcdcdc;
}

.el-button{
    position: relative;
    left: -20px;
}

.downloadCenter{
    width: calc(100% - 200px);
    height: calc(100% - 10px);
    position: relative;
    top: 10px;
    .title{
        .public();
        font-weight: bold;
        font-size: 25px;
        line-height: 40px;
    }
    .projectBidding{
        overflow: hidden;
        width: calc(100% - 40px);
        height: calc(100% - 60px);
        position: relative;
        left: 20px;
        box-shadow: 0 0 3px #c1c0c0;
        border-top: 0;
        .elTable{
            width: calc(100% - 40px);
            height: calc(100% - 60px);
            position: relative;
            left: 20px;
            top: 20px;
        }
    }
    .projectBidding::-webkit-scrollbar{
        width: 0;
    }
    .paging{
        width: calc(100% - 40px);
        height: 50px;
        position: relative;
        top: 20px;
        left: 20px;
    }
}

/deep/ .el-button--text{
    position: relative;
    left:0px;
}

.el-table td, .el-table th.is-leaf{
    border: 0;
}

/deep/ .el-table--enable-row-transition .el-table__body td:nth-child(2){
    border-right: 0;
}

/deep/ .el-table_2_column_8{
    border-right: 0;
}

/deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
  text-align: center;
}

/deep/ .el-table__fixed-right::before, .el-table__fixed::before{
  background: none;
}
</style>